<template>
	<view class="flex-wrap">
		<view class="upload-image" v-if="is_oss == 0" v-for="(item,index) in list" :key="index" @click="handlePreviewImage(item)">
			<u-image width="188rpx" height="188rpx" border-radius="16rpx" :src="item.domain + item.uri"></u-image>
			<view class="delete-icon bg-fff" @click.stop="handleDelte(index)">
				<u-icon name="close-circle-fill" color="red" size="45rpx"></u-icon>
			</view>
		</view>
		<view class="upload-image" v-if="is_oss == 1" v-for="(item,index) in list" :key="index" @click="handlePreviewImageOss(item)">
			<u-image width="188rpx" height="188rpx" border-radius="16rpx" :src="item.uri"></u-image>
			<view class="delete-icon bg-fff" @click.stop="handleDelte(index)">
				<u-icon name="close-circle-fill" color="red" size="45rpx"></u-icon>
			</view>
		</view>
		<view class="upload-image" @click="uploadImage" v-if="list.length < 9">
			<view class="upload-no flex-column-center" v-show="loading == 1">
				<u-icon name="plus" color="#E1E1E1" size="60"></u-icon>
			</view>
			<view class="upload-no flex-column-center" v-show="loading == 2">
				<u-loading mode="flower" size="60"></u-loading>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'upload-image-list',
		props: {
			count: {
				type: Number,
				default: 9,
			},
			is_oss: {
				type: Number,
				default: 0
			},
			file_path: {
				type: String,
				default: "wechat_icon" 
			}
		},

		data() {
			return {
				loading: 1,
				list: [],
			}
		},
		created() {

		},
		methods: {
			setList(list) {
				this.list = list;
			},
			success() {
				return this.list;
			},
			handleDelte(index) {
				uni.showModal({
					title: '提示',
					content: '是否删除这个图片',
					success: (res) => {
						if (res.confirm) {
							this.list.splice(index,1);
							this.$emit('success',this.list);
							// console.log('用户点击确定');
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			handlePreviewImageOss(item) {
				uni.previewImage({
					urls: [item.uri],
				});
			},
			handlePreviewImage(item) {
				uni.previewImage({
					urls: [item.aomain + item.uri],
				});
			},
			uploadImage() {
				uni.chooseImage({
					count: this.count - this.list.length,
					success: (res) => {
						this.loading = 2;
						var num = 0;
						res.tempFiles.forEach((item,index) => {
							if(this.is_oss == 1) {
								uni.$u.api.aliyunOSSFileUploadAsset(1,'image', item, this.file_path).then(uploadRes => {
									this.list.push(uploadRes);
									this.loading = 1;
									num++;
								});
							} else {
								uni.$u.api.aliyunOSSFileUpload(1,'image', item, this.file_path).then(uploadRes => {
									this.list.push(uploadRes);
									this.loading = 1;
									num++;
								});
							}
						})
						
						setTimeout(() => {
							if(num == res.tempFiles.length) {
								this.$emit('success',this.list);
							}
						},500)
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.upload-image {
		margin: 0 10rpx 20rpx 0;
		position: relative;
	
		.delete-icon {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			z-index: 99;
			border-radius: 50%;
		}
	}
	
	.upload-no {
		width: 188rpx;
		height: 188rpx;
		background: #F4F4F4;
		border-radius: 16rpx;
		font-size: 24rpx;
		color: #D4D4D4;
	}
</style>
